<!DOCTYPE html>  
<html>  
<head>  
<title>test</title>  
<style type = "text/css">  
/*设置通配符样式*/  
*{  
    margin:0;   
    padding:0;  
}  
body{  
    font-size:12px;  
}  
ul{  
    list-style:none;  
}  
a{  
    text-decoration:none;  
}  
   
/*设置二级导航样式*/     
.nav {  
    width:500px;   
    height:30px;  
    background-color:#b4b4b4;  
    /*导航栏居中*/  
    margin:auto;  
}  
.nav ul li {   
    width:100px;   
    height:30px;   
    float:left;   
    position:relative;  
}  
.nav ul li a {  
    display:block;  
    width:96px;   
    border:2px solid gray;   
    height:26px;   
    line-height:26px;   
    text-align:center;  
}  
.nav ul li a:hover {   
    background-color:yellow;  
}  
   
/*设置一级导航样式*/  
.nav ul li ul{  
    display:none;  
}  
.nav ul li:hover ul{  
    display:block;  
    width:100px;  
    position:absolute;  
    top:30px;  
    left:0;  
    background-color:white;  
}  
.nav ul li:hover ul li a{  
    display:block;  
    width:96px;  
    height:26px;  
    line-height:26px;  
    border:2px solid gray;  
    text-align:center;  
}  
.nav ul li:hover ul li a:hover{  
    background-color:orange;  
}  
   
/*设置三级导航样式*/  
.nav ul li:hover ul li ul {   
    display:none;  
}  
.nav ul li:hover ul li:hover ul{   
    display:block;   
    width:100px;   
    position:absolute;   
    top:0px;   
    left:100px;  
    background-color:#b4b4b4;  
}  
.nav ul li:hover ul li:hover ul li {   
    width:100px;   
    height:30px;   
}  
.nav ul li:hover ul li:hover ul li a {   
    display:block;   
    width:96px;   
    height:26px;   
    line-height:26px;   
    border:2px solid gray;   
    text-align:center;   
}  
.nav ul li:hover ul li:hover ul li a:hover {   
    background-color:#00CC00;  
}  
.nav ul li:hover ul .nav_jw ul {   
    display:none;  
}  
.nav ul li:hover ul .nav_jw:hover ul{   
    display:block;   
    width:100px;   
    position:absolute;   
    top:0px;   
    left:-100px;  
    background-color:#b4b4b4;  
}  
.nav ul li:hover ul .nav_jw:hover ul li {   
    width:100px;   
    height:30px;   
}  
.nav ul li:hover ul .nav_jw:hover ul li a {   
    display:block;   
    width:96px;   
    height:26px;   
    line-height:26px;   
    border:2px solid gray;   
    text-align:center;   
}  
.nav ul li:hover ul .nav_jw:hover ul li a:hover {   
    background-color:#00CC00;  
}  
   
</style>  
</head>  
<body>  
<div class = "nav">  
<ul>  
<li><a href = "#">瑾辉首页</a>  
        </li>       
    </ul>  
</li>  
<li><a href = "#">关于瑾辉</a>  
    <ul>  
    <li><a href = "#">董事长致辞</a></li>       
    <li><a href = "#">瑾辉概况</a>
    <ul>  
            <li><a href = "#">瑾辉介绍</a></li>  
            <li><a href = "#">瑾辉管理层</a></li>  
            <li><a href = "#">瑾辉组织架构</a></li>
            <li><a href = "#">瑾辉经营业绩</a></li>
            <li><a href = "#">瑾辉发展历程</a></li>
            <li><a href = "#">瑾辉资质荣誉</a></li>
            
        </ul>  
    </li>       
    <li><a href = "#">瑾辉文化</a></li>
    <li><a href = "#">瑾辉管理</a></li>       
    </ul>  
</li>  
<li><a href = "#">项目前景</a>  
    <ul>  
    <li><a href = "#">产品中心</a></li>       
    <li><a href = "#">应用领域</a></li>       
    <li><a href = "#">我们的优势</a></li>       
    </ul>  
</li>  
<li><a href = "#">资讯中心</a>  
    <ul>  
    <li><a href = "#">行业资讯</a></li>       
    <li><a href = "#">瑾辉动态</a></li>       
    <li><a href = "#">媒体焦点</a></li>
    <li><a href = "#">通知公告</a></li>
    <li><a href = "#">视频中心</a></li>       
    </ul>  
</li>  
<li><a href = "#">瑾辉商学院</a>  
    <ul>  
    <li class="nav_jw"><a href = "#">二级导航</a>  
        <ul>  
            <li><a href = "#">三级导航</a></li>  
            <li><a href = "#">三级导航</a></li>  
            <li><a href = "#">三级导航</a></li>  
        </ul>  
    </li>       
    <li class="nav_jw"><a href = "#">二级导航</a>  
        <ul>  
            <li><a href = "#">三级导航</a></li>  
            <li><a href = "#">三级导航</a></li>  
            <li><a href = "#">三级导航</a></li>  
        </ul>  
    </li>       
    <li class="nav_jw"><a href = "#">二级导航</a>  
        <ul>  
            <li><a href = "#">三级导航</a></li>  
            <li><a href = "#">三级导航</a></li>  
            <li><a href = "#">三级导航</a></li>  
        </ul>  
    </li>       
    </ul>  
</li>  
</ul>  
</div>  
</body>  
</html>  